<template>
  <div class="Classification">
    <!-- 顶部页面标题栏 -->
    <!-- <div class="header">
      <div class="backIcon" @click="back">
        <img slot="icon" src="../../assets/transfer/backIcon.png" class="iconImage" />
      </div>
      <div class="theme">分类选择</div>
    </div> -->

    <!-- 页面主体信息区域 -->
    <div class="outermostMargin">
      <van-radio-group v-model="radio">
        <van-cell-group>
          <van-cell
            v-for="item in radios"
            :key="item.index"
            :title="item.title"
            clickable
            @click="radio = item.name"
          >
            <van-radio slot="right-icon" :name="item.name" />
          </van-cell>
        </van-cell-group>
      </van-radio-group>
    </div>
  </div>
</template>
<script>
import bus from "../../plugins/eventBus.js";
export default {
  name: "Classification",
  data() {
    return {
      radio: "投诉",
      radios: [
        { title: "投诉", name: "投诉" },
        { title: "建议", name: "建议" },
        { title: "举报", name: "举报" },
        { title: "咨询", name: "咨询" },
        { title: "其他", name: "其他" }
      ]
    };
  },
  methods: {
    back() {
      bus.$emit("classification", this.radio);
      this.$router.isBack = true; // 将返回状态置为触发态，以边路由监听触发返回动画
      this.$router.back(); // 路由向后退一步
    },

    canselbut() {
      this.back();
    },
    subbut() {
      console.log(this.fieldValues.message);
    }
  }
};
</script>
<style lang="scss" scoped>
@import "~@/smobile.scss";
.Classification {
  .header {
    padding: $sm-spaceing-block-sm 0 $sm-spaceing-block-sm 0;

    position: absolute;
    width: $sm-img-per-max;
    height: 21px;
    background: $sm-bg-color;
    z-index: 2;

    display: flex;
    flex-direction: row nowrap;
    justify-content: flex-start;
    .backIcon {
      position: absolute;
      white-space: nowrap;
      height: $sm-icon-px-md;
      z-index: 4;

      .iconImage {
        height: $sm-icon-px-md;
        width: $sm-icon-px-md;
        transform: rotateY(180deg);
      }
    }

    .theme {
      position: absolute;
      font-weight: bold;
      width: $sm-img-per-max;
      text-align: center;
      white-space: nowrap;
      z-index: 3;
    }
  }

  .outermostMargin {
    // padding: 0 $sm-spaceing-block-base 0 $sm-spaceing-block-base;

    background: $sm-bg-color-grey;
    color: $sm-text-color;
    font-size: $sm-font-size-lg;

    overflow: auto;
    height: 100vh;
    // margin: 41px 0 0 0;
  }
}
</style>